<template>
  <div class="overview">
    <ul>
      <li>{{ name }}</li>
      <li>{{ age }}</li>
    </ul>
    <div v-for="(item, index) in person" :key="index">
      {{ item.name }}
    </div>
    <div>{{ family.children[0].rank }}</div>
    <div>{{ family.rank }}</div>

    <span class="btn" @click="handleBtn">按钮</span>
  </div>
</template>

<script setup name="overview">
  import { ref, shallowRef, reactive, watch } from 'vue';
  const name = ref('姓名');
  const age = ref(20);
  const person = ref([{ name: '张三' }, { name: '李四' }]);
  let family = reactive({ rank: 'father', children: [{ rank: 'son' }] });

  const handleBtn = () => {
    person.value[0].name = 'ass';
    //family = { rank: 'sss' };
  };

  watch(
    () => family.rank,
    (newValue, oldValue) => {
      console.log('监听getter', newValue);
      console.log(newValue, oldValue);
    }
  );
  watch(person, (newValue, oldValue) => {
    console.log('数据源');
    console.log(newValue, oldValue);
  });
</script>

<style lang="less" scoped>
  .btn {
    display: block;
    padding: 10px;
    background-color: red;
    color: #ffff;
    cursor: pointer;
  }
</style>
